<!DOCTYPE html>
<html lang="en">
{% load static %}

<head>

    <meta charset="UTF-8">

    {% block head %}

    {% endblock %}
    <style>
        body{
            height: 100%;
            width: 100%;
            margin:0;
            padding: 0;
        }
        #nav{
            width: 99%;
            height: 60px;
            background-image: url("{% static 'nav3.jpg' %}") ;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
            border: rgba(56, 25, 169, 0.07) solid ;
            position: fixed;
            top: 0;
            z-index: 1000;
        }
        #nb{
                    width: 1200px;
                    height: 60px;
                    /*border: red solid;*/
                    margin:0 auto;
                    position: relative;
                    /*left:180px;*/
                }
        #logo{
            width: 160px;
            height: 58px;
            position: absolute;

            left:20px;
        }
        #logo>img{
            width: 80px;
            height: 54px;
        }
        #link>ul{
            margin:0 ;
            padding-left: 0;
            position: absolute;
            right: 20px;
        }
        #link>ul>li{
            float: left;
            list-style: none;
            line-height: 60px;
            margin-left: 120px;
        }
        li>a{
            text-decoration: none;
            font-family: "Microsoft Himalaya";
            color: black;
        }
        section{
            left: 170px;
            top: 85px;
            width: 1240px;
            height: 600px;
            {#border: blue solid;#}
            background-color: aliceblue;

            position: relative;
        }
        #teaName{
            font-family: 楷体;
            background-color: white;
            border: rgba(56, 25, 169, 0.07) solid ;
            height: 40px;
            line-height: 40px;
            left: 30px;
            top: 125px;
            position: absolute;
        }
        #teaPic{

            width: 120px;
            height: 100px;
            top: 20px;
            left: 15px;
            position: absolute;
        }
        #teaPic>a{
            width: 120px;
            height: 100px;
            {#border: rgba(56, 25, 169, 0.07) solid ;#}
            {# border: red solid;#}
        }
        #teaPic>a>img{
            width: 120px;
            height: 100px;
            border: rgba(56, 25, 169, 0.07) solid ;
            {#border: red solid;#}
        }
        #menu{
            background-image: url("{% static 'menu1.jpg' %}") ;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
            width: 150px;
            height: 600px;
            top: 85px;
            position: absolute;
        }

        #menu>ul{

            padding-left: 0;
            position: absolute;
            top: 160px;
            #left: 40px;
        }
        #menu>ul>li{
            width: 150px;
            list-style: none;
            line-height: 40px;
            margin-top: 30px;
            text-align: center;

        }
        #ly{
            background-color: ghostwhite;

            border: rgba(56, 25, 169, 0.07) solid ;
            width: 500px;
            height: 590px;
            left: 0;
            position: absolute;
        }
        #gonggao{
            background-color: ghostwhite;
            border: rgba(56, 25, 169, 0.07) solid ;
            width: 500px;
            height: 590px;
            left: 530px;
            top:0;
            position: absolute;
        }
        #qiandao{
            {#border: red solid;#}
            width: 380px;
            height: 320px;
            top: 85px;
            right: 5px;
            position: absolute;
        }
        #bottom{
            position: relative;
            border: rgba(56, 25, 169, 0.07) solid ;
            width: 100%;
            height: 80px;
            margin-top: 80px;
            background-image: url("{% static 'bottom1.jpg' %}") ;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }
        #bottom>ul{
            border: rgba(56, 25, 169, 0.01) solid ;
            height: 30px;
            margin: 15px 10% auto 10%;
        }
        #bottom>ul>li{
            border: rgba(56, 25, 169, 0.01) solid ;
            float: left;
            list-style: none;
            line-height: 20px;
            margin-left: 240px;
        }
        hr{
            margin-top: 0;
        }
        #author{
            margin: 0;
            text-align: center;
            color: darkgrey;
            bottom: 0;
        }

        h3{
            color: #116ec3;
        }

        #menu a{
            display:block;
            {#background: blue;#}
        }
        #menu a:hover{background: rgba(177, 19, 226, 0.4);color: white}

        a:link    {color:midnightblue;}
        a:visited {color:blue;}
        a:hover   {color: #b113e2;}

    </style>
</head>
<body>
    <span id="top"></span>
    <div id="nav">
        <div id="nb">
            <div id="logo">
                <img src={% static 'logo1.jpg' %} alt="">
            </div>
            <div id="link">
                <ul>
                    {% block nav %}
                    {% endblock nav%}
                </ul>
            </div>
        </div>
    </div>

    <div id="menu">
        <span id="teaPic"><a href="/change/"><img src="/media/{{ request.session.image }}"
                                                  alt=""></a></span>
        <span id="teaName" style="width: 90px;text-align: center;height: 30px">
            {{ request.session.name}}</span>
        <ul>
            {% block li %}

            {% endblock %}

        </ul>
    </div>
    <section>
        {% block section %}

        {% endblock section%}

    </section>
    {% block tjshow %}

    {% endblock tjshow %}
    {% if divqd %}
        <div id="qiandao">
            {% block qd %}

            {% endblock qd %}

        </div>
    {% endif %}

    <div id="bottom">
        <ul>
            <li><a href="http://www.hpu.edu.cn">河南理工大学</a></li>
            <li><a href="http://www.chsi.com.cn">学信网</a></li>
            <li><a href="http://yz.chsi.com.cn">研究生招生信息网</a></li>
        </ul>
        <hr>
        <p id="author" align="center">SunChao cc</p>
    </div>
<script src="{% static '/jquery.min.js' %}"></script>
<script>
     document.getElementById('tjshow').style.display='none';
</script>

<script>
    $(".tp").each(function () {
        var box = $(this);
        var text = box.text();
        var txt = text.substring(0, 10);
        text.length > 10 ? txt += '...' : txt = text;
        box.text(txt);
    });
    $(".relink").each(function () {
        var txt = $(this).text();
         index = txt .lastIndexOf("\/");
         var str  = txt .substring(index + 1, txt .length);
         $(this).text(str);
    })
</script>
</body>
</html>